<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home Page of Business Refactoring Service</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>
    <body>
        <div id="app">
            <el-card>
                <div slot="header">
                    <span>{{component.rname}}</span>
                    <span style="float: right; padding: 3px 0">
                        <el-button type="text" @click="handleImport()">导入已有项目
                        </el-button>
                        <el-button type="text" @click="handleCreateDlg(true)">去创建新项目
                        </el-button>
                    </span>
                </div>
                <div style="font-size: 0.875rem;margin-bottom: 1.125rem;">
                    <span>{{component.description}}</span>
                </div>
            </el-card>
            <br />
            <el-table :data="projectList" style="width: 100%;margin-bottom: 20px;" border highlight-current-row stripe
                :default-sort="{prop: 'rname', order: 'none'}">
                <el-table-column property="rname" label="名称" sortable></el-table-column>
                <el-table-column label="项目代码" sortable>
                    <template slot-scope="scope">
                        {{scope.row.rpath.substr(0,scope.row.rpath.indexOf('/'))}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="100px">
                    <template slot-scope="scope">
                        <el-button size='mini' type='primary' @click="handleEdit(scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div id='importDlg'>
            <el-dialog :visible.sync="visible" title="行动设置">
                <el-form label-width="80px">
                    <el-form-item>
                        <el-upload action="https://none" :file-list="fileList" :auto-upload="false" :on-change="handleUploadChange"
                            :on-remove="handleUploadChange" accept=".config,.json">
                            <el-button slot="trigger" size="small" type="primary">选取配置文件</el-button>
                            <el-button style="margin-left: 10px;" :disabled="ruleDef.rtype!=='project'" size="small" type="success"
                                @click="handleConfigUpload">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传config文件，且不超过3Mb</div>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label='项目名称' v-if='ruleDef.rpath'>
                        <el-input disabled v-model="ruleDef.rname"></el-input>
                    </el-form-item>

                    <el-form-item label='项目代码' v-if='ruleDef.rpath'>
                        <el-input disabled v-model="ruleDef.rpath"></el-input>
                    </el-form-item>

                </el-form>
            </el-dialog>
        </div>
        <script type='module'>
            import * as $util from '../lib/hc-util.js'
            import * as $rest from '../lib/hc-rest-service.js'
            import HcRuleCreationDialog from '../com/hc-rule-creation-dialog.js'
            
            const projectRtype = 'project';
            $rest.check$configOrLoad(onready);
            function onready() {
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        component: $config.componentMap[projectRtype],
                        projectList: [],
                    },
                    methods: {
                        handleEdit(rule) {
                            let url = this.component.objectpage;
                            url = url.replace('${rpath}', encodeURI(rule.rpath));
                            // console.warn('url',url);
                            if (window.top.$workbench) {
                                window.top.$workbench.openPage({
                                    url: url,
                                    title: rule.rname,
                                    tag: "rpath@" + rule.rpath,
                                }, true);

                            } else document.location.href = url;
                        },
                        handleCreateDlg: function(showing) {
                            this.creationDlg.vm.visible = showing;
                            if (showing) {
                                this.creationDlg.vm.formdata.name = this.component.rname + (this.projectList.length + 1);
                                this.creationDlg.vm.selectName()
                            }
                        },
                        doCreate: function(val) {
                            let ruleInfo = {};
                            ruleInfo.rtype = projectRtype;
                            ruleInfo.rname = val.name;
                            ruleInfo.rpath = val.code.toLowerCase() + "/Main";
                            let self = this;
                            // $rest.create(ruleInfo,function(ruleDef){
                            //     self.forwardToEditPage(ruleDef);
                            // });
                            $rest.postdata('/manage/createProject',ruleInfo,function(ruleDef){
                                self.forwardToEditPage(ruleDef);
                            });
                        },
                        forwardToEditPage(ruleDef){
                            if(window.top.vm != vm && window.top.vm.projectDropDownList)
                            {
                                window.top.vm.projectDropDownList.push(ruleDef);
                                if(!window.top.vm.currentproject ) 
                                {
                                    //will cause the all page tab closed except for the welcome.
                                    window.top.vm.currentproject = ruleDef.rpath;
                                }
                             }
                            if (window.top.$workbench) {
                                document.location.reload(true);
                            }
                            //forward to the edit page
                            this.handleEdit(ruleDef)
                        },
                        handleImport(){
                            // console.warn('handleImport');
                            vmimport.visible = true;
                        },
                    },
                    creationDlg: {},
                    mounted: function() {
                        let thisvm = this;
                        this.creationDlg = new HcRuleCreationDialog({
                            type: projectRtype,
                            visible: false,
                            firstUpperCase: false,
                            confirmed: function(val) {
                                thisvm.doCreate(val)
                            }
                        })
                    }
                });

              	$rest.projectList(function(list) {
                      vm.projectList = list;
                  });
                  
                  
              window.vmimport = new Vue({
                  el: '#importDlg',
                  data: {
                      visible:false,
                      ruleDef:{},
                      fileList: [],
                  },
                  methods: {
                      handleUploadChange(file, fileList) {
                          this.fileList = fileList.slice(-1);
                          let self = this;
                          if(this.fileList.length>0)
                          {
                              $util.readAsText(this.fileList[0].raw,function(data){
                                  try{
                                    self.ruleDef = JSON.parse(data)
                                    if(self.ruleDef.rtype !=='project') 
                                        self.$message({type:'warning',message:'非法决策服务配置文件'})
                                  }
                                  catch(ex)
                                  {
                                      self.ruleDef={};
                                      self.$message({type:'warning',message:'非法决策服务配置文件，错误详情：'+ex})
                                  }
                              })
                          }
                          else{
                              self.ruleDef={};
                          }
                      },
                      handleConfigUpload:function()
                      {
                        $rest.postdata('/manage/importProj',this.ruleDef,function(ret){
                            vm.forwardToEditPage(ret);
                        })
                      },
                  },
                  mounted: function() {
                  }
              });
              
            }
        </script>
    </body>
</html>
